<!DOCTYPE html>
<!--[if IE 7]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8" />
		<title>我的学习进度_${webName}</title>
		<meta name="description" content="" />
		<meta name="author" content="HuangBQ | ${wwwRoot}" />
		<#include "inc/head-common.ftl">
		
		<!-- jQuery FullCalendar Styles -->
		<link rel='stylesheet' type='text/css' href='${cssRoot}plugins/jquery.fullcalendar.css' />
	</head>
	<body>
		<#include "inc/header.ftl">
		
		<!-- Main content -->
		<div class="container" role="main">
		
			<!-- Breadcrumbs -->
			<ul class="breadcrumb">
				<li><a href="${wwwRoot}"><span class="icon-home"></span> ${wwwName}</a></li>
				<li><a href="${webRoot}">${webName}</a></li>
				<li class="active">我的学习进度</li>
			</ul>
			<!-- Breadcrumbs -->
			
			<!-- Main data container -->
			<div class="content">
			
				<!-- Page header -->
				<div class="page-header">
					<h1><span class="icon-calendar"></span> 我的学习进度 <small>你的学习速度已经超过了${countMap["faster"]?default("50%")}的同学！</small></h1>
					<ul class="page-header-actions">
						<li class="active demoTabs"><a href="#basic" class="btn btn-wuxia">学习日程</a></li>
						<li class="demoTabs"><a href="#tasklist" class="btn btn-wuxia">我的学习任务完成情况</a></li>
						<li><a href="#" class="btn btn-wuxia pull-right" title="分享我的学习状态到朋友圈" target="_blank"><span class="icon-share"></span> 分享出去炫耀一下</a></li>
					</ul>
				</div>
				<!-- /Page header -->
				
				<!-- Tab content -->
				<div class="page-container tab-content">
				
					<!-- Tab #basic -->
					<div class="tab-pane active" id="basic">
						
						<!-- Grid row -->
						<div class="row">
					
							<article class="span12">
								<div class="alert alert-success">
									<img src="${uploadRoot}avatar/default.png" alt="小讲" /> <strong>嘿！${Session["dw_name"]?default("无名士")}</strong>，你已经开通产品${countMap["natureday"]?default("1")}天，其中有${countMap["trainday"]?default("1")}天登录本系统学习，累计时长${Session["dh_onlinetime"]?default("1")?c}分钟以上，目前你已经完成${countMap["finishnum"]?default("2")}个学习任务。继续加油哦！
								</div>
								<div class='full-calendar'></div>
							</article>
						
						</div>
						<!-- /Grid row -->
						
					</div>
					<!-- Tab #basic -->
					
					<!-- Tab #tasklist -->
					<div class="tab-pane" id="tasklist">
						
						<!-- Grid row -->
						<div class="row">
						
							<!-- Table options -->
							<article class="span12">
								<!--h2>我的学习任务完成情况</h2-->
								<div class="alert alert-success">
									<img src="${uploadRoot}avatar/default.png" alt="小讲" /> <strong>嘿！${Session["dw_name"]?default("无名士")}</strong>，针对你目前的情况，小讲暂为你安排 ${countMap["tasknum"]?default("70")}个学习任务(学习期间会智能调整)，预计要花${countMap["spendtime"]?default("2个月")}的时间，目前你已经完成了${countMap["finishrate"]?default("6%")}。继续加油哦！
								</div>
								
								<table class="table table-bordered table-striped">
									<thead>
										<tr>
											<th width="260px;">学习任务</th>
											<th width="150px;">状态</th>
											<th>学习目标</th>
										</tr>
									</thead>
									<tbody>
										<#list avaliableTasks as task>
										<tr>
											<td>${task.name}</td>
											<td class="muted">
												<#if task.receivedate ??>
													<#if (task.systaskid >800) >
														<#if (task.systaskid <900) >
														<#if task.state == 3>已完成 <button class="btn btn-basic btn-wuxia" onclick="javascript:window.open('${webRoot}task/execute/${task.taskid?c}.do','_blank')">现在去测测</button></#if>
														<#if task.state == 2>待完成 <button class="btn btn-success btn-wuxia" onclick="javascript:window.open('${webRoot}task/execute/${task.taskid?c}.do','_blank')">现在去测测</button></#if>
														<#else>
														<#if task.state == 3>已完成 <button class="btn btn-basic btn-wuxia" onclick="javascript:window.open('${webRoot}task/execute/${task.taskid?c}.do','_blank')">现在去填填</button></#if>
														<#if task.state == 2>待完成 <button class="btn btn-success btn-wuxia" onclick="javascript:window.open('${webRoot}task/execute/${task.taskid?c}.do','_blank')">现在去填填</button></#if>
														</#if>
													<#else>
														<#if task.state == 3>已完成 <button class="btn btn-basic btn-wuxia" onclick="javascript:window.open('${webRoot}task/execute/${task.taskid?c}.do','_blank')">复习一下</button></#if>
														<#if task.state == 2>待完成 <button class="btn btn-success btn-wuxia" onclick="javascript:window.open('${webRoot}task/execute/${task.taskid?c}.do','_blank')">现在去学</button></#if>
													</#if>
													
												<#else>
													---
												</#if>
											</td>
											<td>${task.description}</td>
										</tr>
										</#list>
										<#list leftTasks as task>
										<#if (task.systaskid<499)>
										<tr>
											<td>${task.name}</td>
											<td class="muted">---</td>
											<td>${task.description}</td>
										</tr>
										</#if>
										</#list>										
									</tbody>
								</table>
							</article>
							
						</div>
						<!-- /Grid row -->
						
					</div>
					<!-- /Tab #tasklist -->
					
				</div>
				<!-- /Tab content -->
				
			</div>
			<!-- /Main data container -->
			
		</div>
		<!-- /Main content -->
		
		<#include "inc/footer.ftl">
		
		<!-- jQuery FullCalendar -->
		<script src="${scriptRoot}plugins/fullCalendar/jquery.fullcalendar.min.js"></script>
		
		<!-- Google Calendar plugin for jQuery FullCalendar -->
		<script src="${scriptRoot}plugins/fullCalendar/gcal.js"></script>
		
		<script>
			$(document).ready(function() {
				var data = eval("(" + '${taskcalendar}' + ")");
				$('.full-calendar').fullCalendar({
					header: {
						left: 'prev,next today',
						center: 'title',
						right: 'month,basicWeek,basicDay'
					},
					buttonText: {
						prev: '<span class="icon-circle-arrow-left"></span>',
						next: '<span class="icon-circle-arrow-right"></span>'
					},
					editable: true,
					events:data
				});
				
				$('.full-calendar-gcal').fullCalendar({
					header: {
						left: 'prev,next today',
						center: 'title',
						right: 'month,basicWeek,basicDay'
					},
					buttonText: {
						prev: '<span class="icon-arrow-left"></span>',
						next: '<span class="icon-arrow-right"></span>'
					},
					events: {
						url: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
						className: 'gcal-event', // an option!
						currentTimezone: 'Asia/Shanghai' // an option!
					}
				});
				
			});
		</script>
</body>
</html>
